{extend name="public:base" /}
{block name="head"}
<link href="__PUBLIC__/view_res/mobile/css/wshop_company_center.css" type="text/css" rel="Stylesheet" />
<link href="__PUBLIC__/view_res/mobile/css/uc.css" type="text/css" rel="Stylesheet" />
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" href="__PUBLIC__/bootstrap-3.3.7-dist/css/bootstrap.min.css">
<link rel="stylesheet" href="__PUBLIC__/bootstrap-3.3.7-dist/css/img.css">
{/block}
{block name="header"}
{include file="public/top-nav" /}
{/block}
{block name="content"}
<div class="card">
    <h5 class="card_title">买入凭证</h5>
    {if condition="$info.b_state eq 4"}
    <label class="title" for="remark" style="color: red;font-weight: normal;">审核未通过</label>
    <div class="button_list">
        <textarea id="remark" style="width: 100%;height: 80px;" readonly>{$remark_one.remark}</textarea>
    </div>
    {elseif condition="$info.b_state eq 1 or $info.b_state eq 2"}
    <p class="title" style="color: red">正在进行中</p><br>
    {elseif condition="$info.b_state eq 3"}
    <p class="title" style="color: red">审核通过</p><br>
    {else}
    <p class="title" style="color: red">未提交</p><br>
    {/if}
    <p class="title">买入信息</p>
    <p><span>交易所：</span>{:get_trade_name($info.exchange)}</p>
    <p><span>交易品种：</span>{:get_variety_name($info.exchange_variety)}</p>

    <p><span>买入交易时间：</span>{$info.begin_day}</p>
    <p class="title">买入凭证上传</p>
    <form enctype="multipart/form-data" action="{:url('contract/free_buy')}" method="post">
        {:token()}
        <input type="hidden" name="id" value="{$info.id}"  />

        {if condition="$info.b_state eq 4 or $info.b_state eq 0"}
        <div class="addbtn_wrap">
            <input type="button" class="btn btn-primary addbtn" value="点击添加图片">
            <input class="btn btn-primary" type="file" name="image[]" id="file1" style="z-index: 1" onchange="getPhoto(this)">
        </div>
        {/if}
        <!-- 图片上传 -->
        <div class="img_wrap">
            {if condition="$img neq null"}
            {volist name="img" id="img"}
            <div class="pic_wrap" id=" showPic{$img.id}" onmouseover="overDelete(this)" onmouseleave="leaveDelete(this)">

                <a href="{$img.img_path}"><img  src="{$img.img_path}" class="img img-rounded"></a>

                {if condition="$info.b_state eq 4"}
                <div class="delete">
                    <img data-img="{$img.id}" src="__PUBLIC__/bootstrap-3.3.7-dist/images/x.png" onclick="deletePic(this)">
                </div>
                {/if}
            </div>
            {/volist}
            {/if}
        </div>
        <input type="submit" value="提交" style="width:100%;margin-top:20px;" class=" btn btn-primary ">
    </form>
</div>
<style media="screen">
    body {
        background-color: #efeff4
    }

    .card {
        font-size: 14px;
        position: absolute;
        margin-bottom: 10%;
        width: 80%;
        top: 80px;
        left: 50%;
        transform: translate(-50%, 0%);
        overflow: hidden;
        border-radius: 2px;
        background-color: #fff;
        background-clip: padding-box;
        box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
        padding: 10px;
        color: #8f8f94;
        font-weight:bold;
    }
    .card>p>span{
        width: 120px;
        display: inline-block;
    }
    .card .card_title {
        font-size: 20px;
        font-weight: 400;
        text-align: center;
        line-height: 60px;
    }

    .card .title {
        border-left: 2px solid #4ab8ec;
        font-size: 16px;
        line-height: 16px;
        padding-left: 4px;
        margin: 10px 4px;
        color: #000;
    }

</style>
<script src="__PUBLIC__/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script src="__PUBLIC__/bootstrap-3.3.7-dist/js/img.js"></script>
<script>
    /**
     * Created by Administrator on 2018/5/29.
     */
    /*预览*/
    var count=1;
    function getPhoto(node) {
        var imgURL = "";
        try{
            var file = null;
            if(node.files && node.files[0] ){
                file = node.files[0];
            }else if(node.files && node.files.item(0)) {
                file = node.files.item(0);
            }

            try{
                imgURL =  file.getAsDataURL();
            }catch(e){
                imgRUL = window.URL.createObjectURL(file);
            }
        }catch(e){
            if (node.files && node.files[0]) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    imgURL = e.target.result;
                };
                reader.readAsDataURL(node.files[0]);
            }
        }
        /*动态添加file和对应的图片预览*/
        createPic();
        createFile();
        count++;
        return imgURL;
    }

    /*创建图片预览元素*/
    function createPic() {
        var picText='<div class="pic_wrap" id=" showPic'+count+'" onmouseover="overDelete(this)" onmouseleave="leaveDelete(this)">'+
                '<img  src="'+imgRUL+'"" class="img img-rounded">'+
                '<div class="delete"><img src="__PUBLIC__/bootstrap-3.3.7-dist/images/x.png" onclick="deletePic(this)"></div>'+
                '</div>';
        /*遍历除去最新一个file的所有file，如果有file的值与最后一个file的值相等，不插入预览图*/
        for(var i=0;i< $('input[type=file]').length-1;i++){
            var val= $('input[type=file]').eq(i).val();
            if($('input[type=file]').last().val()==val){
                /*此处不插入图片，就让count回到之前那一步，否则id=file和id=showPic的数据后缀对不上，导致file和图片对应错乱*/
                count=count-1;
                return;
            }
        }
        $('.img_wrap').append(picText);
    }

    /*创建新的file元素*/
    function createFile() {
        var flieText='<input type="file" name="image[]" id="file'+(count+1)+'" style="z-index: '+(count+1)+'" onchange="getPhoto(this)">';
        /*遍历除去最新一个file的所有file，如果有file的值与最后一个file的值相等，提示图片已存在，清空最后一个file*/
        for(var i=0;i< $('input[type=file]').length-1;i++){
            var val= $('input[type=file]').eq(i).val();

            if($('input[type=file]').last().val()==val){
                var file = $('input[type=file]').last();
                file.after(file.clone().val(""));
                file.remove();
                alert("图片已存在！");
                return;
            }
        }
        $('.addbtn_wrap').append(flieText);
        /*图片数量大于1，显示提交按钮，添加一次判断一次*/
        if($('.pic_wrap').length<=0){

            $('input[type=submit]').css('display','none');
        }else {
            $('input[type=submit]').css('display','block');
        }
    }

    /*移入移出，删除遮罩层显示隐藏*/
    function overDelete(obj) {
        $(obj).children('div').show();
    }

    function leaveDelete(obj) {
        $(obj).children('div').hide();
    }

    /*删除图片和对应的file*/
    function deletePic(obj) {
        /*提取图片的id的数字部分*/
        var picId=$(obj).parent().parent().attr('id');
        var picVal= picId.replace(/[^0-9]/ig,"");
        var fileArr=$('input[type=file]');
        /*遍历file，如果图片id的数字部分和file的id的数字部分相同，那么文件与图片是对应的，删除图片的同时删除对应的file*/
        fileArr.each(function () {
            /*提取file的id的数字部分*/
            var fileId=$(this).attr('id');
            var fileVal = fileId.replace(/[^0-9]/ig,"");
            if(fileVal==picVal){
                $(this).remove();
                $(obj).parent().parent().remove();
            }
        });
        /*图片数量大于1，显示提交按钮,删除一次判断一次*/
        if($('.pic_wrap').length<=0){

            $('input[type=submit]').css('display','none');

        }else {
            $('input[type=submit]').css('display','block');
        }
    }
    //删除图片及数据库记录
    $('.delete img').click(function(){
        var id = $(this).attr('data-img');
        $.ajax({
            url:"{:url('contract/delImg')}",
            data:{id:id,model:'free_contract_img'},
            success: function(data){
                if(data.code == 1){
                    $(".pic_wrap").remove();
                }
                alert(data.msg);
            }
        });
    });
</script>
{/block}
{block name="script"}
{/block}
